<template>
  <div class="top-wrap animate__animated animate__fadeInDown">
    <slot>
      <div class="header-wrap">
        <div class="title-image-box">
          <img :src="titleImg" :alt="title || '标题图片'" />
          <div class="title-text" v-if="title">{{ title }}</div>
        </div>
      </div>
    </slot>
  </div>
</template>

<script lang="ts" setup>
import bg from "@/assets/images/index/title.webp";

interface Props {
  title?: string;
  titleImg?: string;
}

withDefaults(defineProps<Props>(), {
  title: "",
  titleImg: bg,
});
</script>

<style lang="scss" scoped>
.top-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 1rem;

  .header-wrap {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0 60px;

    .title-image-box {
      position: relative;
      width: 8.91rem;
      height: 1.26rem;

      img {
        width: 100%;
        height: 100%;
      }

      .title-text {
        position: absolute;
        top: 0.14rem;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-family: "YouSheBiaoTiHei";
        font-size: 0.42rem;
      }
    }
  }
}
</style>